<template>
  <div class="page-building">
    <div class="title">
      <span class="strong">菜单管理</span>
      <span>主要用于系统的菜单和按钮权限进行管理</span>
    </div>

    <div class="content">
      <!-- 工具栏 -->
      <div class="tabbar">
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="drawer = true">新增菜单</el-button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button style="padding:0;" size="small" type="text">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-reload" />
              </svg>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="密度" placement="top">
            <el-button style="padding:0;" size="small" type="text">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-column-height" />
              </svg>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="列设置" placement="top">
            <el-button style="padding:0;" size="small" type="text">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-setting" />
              </svg>
            </el-button>
          </el-tooltip>
        </el-row>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          size="medium"
          :data="list"
          style="width: 100%;"
          border
          :header-cell-style="{background:'#fafafa',color: '#000000d9',fontWeight: '400'}"
          row-key="id"
          :indent="20"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="title" label="名称" width="200" />
          <el-table-column prop="path" label="路由地址" width="160" />
          <el-table-column prop="icon" label="图标">
            <template #default="{row}">
              <svg-icon v-if="row.icon" class="icon" :icon-class="row.icon" />
              <span v-else class="icon">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="标识" width="150" />
          <el-table-column prop="type" label="类型">
            <template #default="{row}">
              <span :class="{type:row.type==='menu',type2:row.type==='file'}">{{ row.type==='menu'?'菜单':'按钮' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="权重" />
          <el-table-column prop="create_time" label="状态" width="100">
            <template #default="{row}">
              <el-switch
                v-model="row.status"
                class="switch"
                active-text="显示"
                inactive-text="隐藏"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button v-if="row.type==='menu'" size="small" type="text">添加子集</el-button>
              <el-button size="small" type="text">编辑</el-button>
              <el-button size="small" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div>Ant Design Pro黑马前端 合肥前端欢迎您</div>
      <div>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-copyright" />
          </svg>
        </span>
        <span>2023 悦兴物业集团</span>
      </div>
    </div>

  </div>
</template>

<script>
import { getMenu } from '@/api/auth/menu'
import { transListToTreeData } from '@/utils'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getMenu()
      console.log(res)
      this.list = transListToTreeData(res.data, 0)
    }
  }
}
</script>

<style scoped lang="scss">
.page-building{
  background-color: #f8f9fb;
  padding: 40px;
  .el-button{
    font-size: 14px;
  }
  .title{
    margin-bottom: 18px;
    color: #000000a6;
    font-size: 14px;
    .strong{
      font-weight: 700;
      font-size: 20px;
      margin-right: 12px;
      color: #000000e0;
    }
  }
  .content{
    background-color: #fff;
    padding: 0px 24px 16px;
    .tabbar{
      padding: 16px 0;
      .icon{
        width: 18px;
        height: 18px;
        margin-left: 4px;
      }
      .icon:hover{
        fill: #409EFF;
      }
    }
    .table{
      // padding: 16px 0;
      .icon{
        width: 18px;
        height: 18px;
        margin-left: 10px;
      }
      .icon:hover{
        fill: #409EFF;
      }
      .type{
        background-color: pink;
        padding: 5px;
        font-size: 12px;
      }
       .type2{
        background-color: skyblue;
        padding: 5px;
        font-size: 12px;
      }

      ::v-deep .el-switch__label {
          position: absolute;
          display: none;
          color: #fff;
        }
        /*打开时文字位置设置*/
        ::v-deep .el-switch__label--right {
          z-index: 1;
          right: 22px;
        }
        /*关闭时文字位置设置*/
        ::v-deep .el-switch__label--left {
          z-index: 1;
          left: 22px;
        }
        /*显示文字*/
        ::v-deep .el-switch__label.is-active {
          display: block;
        }
        ::v-deep .el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 60px !important;    /*开关按钮的宽度大小*/
        }

      // ::v-deep.switch.el-switch__label {
      //     position: absolute;
      //     display: none;
      //     color: #fff;
      //   }
      //   /*打开时文字位置设置*/
      //   ::v-deep.switch.el-switch__label--right {
      //     z-index: 1;
      //     right: 22px;
      //   }
      //   /*关闭时文字位置设置*/
      //   ::v-deep.switch.el-switch__label--left {
      //     z-index: 1;
      //     left: 22px;
      //   }
      //   /*显示文字*/
      //   ::v-deep.switch.el-switch__label.is-active {
      //     display: block;
      //   }
      //   ::v-deep.switch.el-switch .el-switch__core,
      //   .el-switch .el-switch__label {
      //     width: 60px !important;    /*开关按钮的宽度大小*/
      //   }

    }
    .page{
    margin-top: 20px;
    }
  }
  .footer{
    color: #000000a6;
    font-size: 14px;
    text-align: center;
    padding-top: 100px;
    div{
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
      span{
        color: #000000e0;
      .icon{
        width: 16px;
        height: 16px;
        // margin-right: 4px;
      }
    }
  }
  }
  .demo-drawer__content{
    padding:0 24px 24px;
    .el-input{
      width: 328px;
    }
  }
  .d2{
    width: 100%;
    height: 52px;
    padding: 8px;
    position: fixed;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    bottom: 0;
    .btn{
      margin-left: 600px;
    }
  }
}
</style>

